<template>
  <div >
    <mavon-editor
      :style="{height:'460px'}"
      @change="onChangeFile"
      @save="saveFile"
      :subfield="markdownProps.subfield"
      v-model="story"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import mavonEditor from "mavon-editor";
import { mapGetters, mapMutations } from "vuex";
import "mavon-editor/dist/css/index.css";

// use
Vue.use(mavonEditor);
interface fileConfig {
  isFolder: boolean;
  filename: string;
  createAt: Date;
  path: string;
  id: string;
  body: string;
}
@Component
export default class EditorContent extends Vue {
  @Prop() id!: string; // 当前展示的文件 id
  @Prop() file!: fileConfig; // 当前展示的文件信息

  content: string = "";
  markdownProps: object = {
    subfield: false
  };

  get story() {
    if (this.$store.getters["fileInfo/getCurrentRole"]) {
      return (this.content += `
**${this.$store.getters["fileInfo/getCurrentRole"]}:** `);
    } else {
      return this.content;
    }
  }
  set story(val) {}
  // 监听 file 文件变化
  @Watch("file")
  onFileChange(newVal: fileConfig, oldVal: fileConfig) {
    this.content = newVal.body;
  }
  mounted() {
    this.content = this.file.body;
  }
  // 保存文件
  @Emit("save")
  saveFile(val: string) {
    console.log(val);
    return this.story;
  }
  // 修改文件
  @Emit("change")
  onChangeFile(val: string) {
    return val;
  }
}
</script>